//import { invoke } from "@tauri-apps/api";
//import { appWindow } from "@tauri-apps/api/window";
import listForm from "../list.vue";
import { message } from "@/utils/message";
import { addDialog, closeDialog } from "@/components/ReDialog";
import { ref, h } from "vue";
import { type FormItemProps } from "./types";

export function useWelcome() {
  const formRef = ref();

  // const proxy = ref(
  //   "trojan, vpn.tyousan.top, 443, password=test, sni=vpn.tyousan.top"
  // );

  const connectionState = ref("");

  // appWindow.listen("state-update", async (event: any) => {
  //   connectionState.value = event.payload;
  // });

  function setConfig() {
    // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
    // invoke("set_config", {
    //   config:
    //     "[General]\n loglevel = trace\n dns-server = 223.5.5.5, 114.114.114.114\n tun = auto\n routing-domain-resolve = true\n interface = 127.0.0.1\n port = 1087\n [Proxy]\n Direct = direct\n Proxy = " +
    //     proxy.value +
    //     "\n [Rule]\n FINAL, Proxy"
    // }).then(_ => {
    //   connectionState.value = "";
    // });
  }

  function startVpn() {
    // invoke("start_vpn").then(_ => {
    //   //reslut.value = "start_vpn OK \n" + reslut.value;
    // });
  }

  function stopVpn() {
    // invoke("stop_vpn").then(_ => {
    //   //reslut.value = "stop_vpn OK \n" + reslut.value;
    // });
  }

  function listDialog(title = "", row?: FormItemProps) {
    if (connectionState.value == "Connected") {
      //
    }

    addDialog({
      title: `${title}`,
      props: {
        formInline: {
          id: row?.id ?? "",
          name: row?.name ?? "",
          ip: row?.ip ?? "",
          port: row?.port ?? 443,
          pwd: row?.pwd ?? ""
        }
      },
      width: "40%",
      draggable: true,
      fullscreen: true,
      showClose: false,
      closeOnClickModal: false,
      closeOnPressEscape: false,
      contentRenderer: () => h(listForm, { ref: formRef }),
      footerButtons: [
        {
          label: "取消",
          type: "info",
          btnClick: ({ dialog: { options, index } }) => {
            closeDialog(options, index);
          }
        },
        {
          label: "确定",
          type: "success",
          btnClick: ({ dialog: { options, index } }) => {
            const curData = options.props.formInline as FormItemProps;
            function chores() {
              message(`您${title}了模拟卷名称为"${curData.id}"的这条数据`, {
                type: "success"
              });
              closeDialog(options, index); // 关闭弹框
            }
            chores();
          }
        }
      ]
    });
  }

  return {
    connectionState,
    setConfig,
    startVpn,
    stopVpn,
    listDialog
  };
}
